/*
 * @Author: hyman
 * @Date: 2022-02-10 10:55:33
 * @LastEditors: hyman
 * @LastEditTime: 2022-02-11 14:32:41
 * @Description: 请填写简介
 */
import React from 'react'
import cookie from 'react-cookies'
import { Link, useSearchParams, useNavigate } from 'react-router-dom'
import { NavBar, Form,Input,Button, Radio,Toast, ImageUploader } from 'antd-mobile'
import styles from './userindex.scss'
import { mockUpload } from './utils'


const Profile = () => 
{
    const LoginUser = cookie.load('LoginUser')
    const navigate = useNavigate();
    const maxCount = 2
    const  [avatarUrl, setavatarUrl] = React.useState([{url: LoginUser.avatar}]) 

    const profile = async(values) => {
        // console.log(values)

        //封装数据
        var data = {
            id: LoginUser.id,
            nickname: values.nickname ? values.nickname : LoginUser.nickname,
            email: values.email ? values.email : LoginUser.email,
            sex: values.sex ? values.sex : LoginUser.sex,
            content: LoginUser.content,
            province: LoginUser.province,
            city: LoginUser.city,
            district: LoginUser.district,
        }

        //判断密码 有填写才追加
        if (values.password) {
            data.password = values.password
        }

        //如果有图片就追加图片
        if (values.avatar) {
            data.avatar = values.avatar[0].file
        }

        // console.log(data)

        var result = await React.$api.profile(data)
        cookie.save('LoginUser', result.data, {path:'/'})
        
        if(result.code  == '1'){
            Toast.show({
                content: result.msg,
            })
            navigate('/user/base/index')
        } else {
            Toast.show({
                content: result.msg,
              })
            return false;
        }
    }

    return (
        <>
            <NavBar onBack={() => navigate(-1)}>基本资料</NavBar>

             {/* <!-- 头像 --> */}
             <div className="myBox">
                <div className="avatar">
                    <img src={LoginUser.avatar} />
                </div>
            </div>

            {/* <!-- 表单结构 --> */}
            <div className="profile">
                <Form onFinish={profile} layout='horizontal'>

                    <Form.Item name='nickname' label='昵称' >
                        <Input type="text" placeholder='请输入昵称' defaultValue={LoginUser.nickname} value={LoginUser.nickname}/>
                    </Form.Item>

                    <Form.Item name='email' label='邮箱'>
                        <Input type="text" placeholder='请输入注册邮箱' defaultValue={LoginUser.email} value={LoginUser.email} readOnly/>
                    </Form.Item>

                    <Form.Item name='password' label='密码'>
                        <Input type='password' placeholder='请输入密码' value={LoginUser.password} />
                    </Form.Item>

                    <Form.Item name='sex' label='性别'>
                        <Radio.Group defaultValue={LoginUser.sex} value={LoginUser.sex}>
                            <Radio  value='0'>保密 &nbsp;</Radio>
                            <Radio  value='1'>男 &nbsp;</Radio>
                            <Radio  value='2'>女</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item name='avatar' label='修改头像' >
                        <ImageUploader
                            defaultValue={avatarUrl}
                            value={setavatarUrl}
                            onChange={setavatarUrl}
                            upload={mockUpload}
                            maxCount={1}
                            showUpload={setavatarUrl.length < maxCount}
                            />
                    </Form.Item>

                    {/* <!-- 提交按钮 --> */}
                    <div className="container-login100-form-btn p-t-10">
                        <Button  block shape='rounded' color="primary" type='submit'>
                            修改资料
                        </Button>
                    </div>

                </Form>
            </div>
        </>
    )
}

export default Profile